<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
    </head>
    <body>

        <h4>原生JavaScript处理事件</h4>

        <p>表单中的提交按钮被鼠标左键单击后默认行为是提交表单</p>
        <form action="http://www.baidu.com/s">
            <input type="text" name="wd" >
            <button type="submit">提交</button>
        </form>

        <script type="text/javascript">
            // 根据CSS选择器选择页面上匹配该选择器的首个元素
            const btn = document.querySelector( '[type=submit]' );
            const form = document.querySelector( 'form' );
            const type = 'click' ;
            const listener = function( event ){
                // 阻止事件的默认行为
                event.preventDefault();

                console.log( 'event: ' , event );
                let target = event.target ;
                console.log( 'target: ' , target );

                // 通过 form 的 submit 函数来提交表单
                // form.submit()
            }
            const capture = true ;
            // 为 btn 所表示的元素绑定事件监听器
            btn.addEventListener( type , listener , capture );
        </script>

        <hr>

        <p>超链接的鼠标左键单击事件默认会打开href对应的网址</p>
        <a href="http://www.kaifamiao.com" target="_blank">开发喵</a>

        <script type="text/javascript">
            let link = document.querySelector( 'a' );
            link.addEventListener( 'click' , function(e){ 
                e.preventDefault() 
            } , false );
        </script>
        
    </body>
</html>